import { defineComponent, onMounted, ref } from "vue";
import AMapView from "../AMap";
import { IAMapRef } from "../AMap/types";
import "./index.less";
import { mapPointPopoverProps } from "./types";
import { getGeoParameters } from "./request";
export default defineComponent({
  name: "",
  props: mapPointPopoverProps,
  setup(_) {
    let amapRef = ref<IAMapRef>();
    const addMarker = (lng: any, lat: any) => {
      // 标记点位
      var marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat),
        icon: new AMap.Icon({
          image:
            "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          size: new AMap.Size(53, 68), // 新的图标大小
          imageSize: new AMap.Size(53, 68), // 原始图标大小
        }),
        anchor: "bottom-center",
      });
      return marker;
    };
    const addPopup = (name: string) => {
      var info = [];
      info.push(`<div class='ponit-popup'>${name}</div>`);
      let infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -55),
        content: info.join("<br/>"), //使用默认信息窗体框样式，显示信息内容
      });
      return infoWindow;
    };

    const getLatlngDetail = () => {
      const { lat, lng } = _;
      getGeoParameters(`${lng},${lat}`).then((e) => {
        const { regeocode } = e || {};
        const { formatted_address } = regeocode || {};
        //   设置弹窗
        const popup = addPopup(formatted_address);
        popup.open(amapRef.value?.map(), [lng, lat]);
      });
    };

    onMounted(() => {
      const { lat, lng } = _;
      //   图标打点
      const marker = addMarker(lng, lat);
      amapRef.value?.map().add(marker);
      // 获取经纬度详情信息
      getLatlngDetail();
      // 设置当前中心点
      amapRef.value?.map().setZoomAndCenter(12, [lng, lat]);
    });
    return () => {
      return (
        <div class="w-full h-[207px]">
          <AMapView ref={amapRef} />
        </div>
      );
    };
  },
});
